import {
    Input,
    InputNumber,
    Textarea,
    Select,
    RadioGroup,
    DatePicker,
    RangePicker,
    Card
} from "ant-design-vue";
import { randomUUID } from "@/utils";
import { h, resolveComponent } from "vue";


export default {
    input: {
        title: "输入框",
        props: {},
        component: Input,
        code(field, globalConfig, helper) {
            return `<a-input ${helper.genCompPropStr(field, globalConfig)} />`;

        },
    },
    textarea: {
        title: "文本域",
        props: { style: "width:100%", autoSize: { minRows: 5, maxRows: 5 } },
        component: Textarea,
        code(field, globalConfig, helper) {
            return `<a-textarea ${helper.genCompPropStr(field, globalConfig)} />`;

        },
    },
    "input-number": {
        title: "数字输入框",
        props: {
            style: "width:100%",
        },
        component: InputNumber,
        code(field, globalConfig, helper) {
            return `<a-input-number ${helper.genCompPropStr(
                field,
                globalConfig
            )} />`;

        },
    },
    select: {
        title: "下拉框",
        props: {
            options: [
                {
                    label: "是",
                    value: 1,
                },
                {
                    label: "否",
                    value: 0,
                },
            ],
        },
        component: Select,
        code(field, globalConfig, helper) {
            const { options = [], ...props } = field.props;
            return `<a-select ${helper.genCompPropStr(
                { ...field, props },
                globalConfig
            )}>
          <a-select-option key='0' value="0">否</-option>
          <a-select-option key='1' value="1">是</-option>
        </a-select>`;
        },
    },
    radio: {
        title: "单选框",
        props: {
            options: [
                {
                    label: "是",
                    value: 1,
                },
                {
                    label: "否",
                    value: 0,
                },
            ],
        },
        component: RadioGroup,
        code(field, globalConfig, helper) {
            const { options = [], ...props } = field.props;
            const selectOptionsStr = options
                .map((item) => {
                    return `<a-radio :value="${item.value}">${item.label}</a-radio>`;

                })
                .join("\r\n");
            return `<a-radio-group ${helper.genCompPropStr(
                { ...field, props },
                globalConfig
            )}>
          ${selectOptionsStr}
        </a-radio-group>`;

        },
    },
    "dict-select": {
        title: "字典下拉框",
        props: {
            dictType: "dict_" + randomUUID(),
        },
        component: {
            setup(props) {
                const ASelect = resolveComponent("a-select");
                const ASelectOption = resolveComponent('a-select-option')
                return () =>
                    h(ASelect, {}, [
                        h(ASelectOption, { label: '字典值1', value: 1, key: 1 }),
                        h(ASelectOption, { label: '字典值2', value: 2, key: 2 }),
                    ]);
            },
        },
        code(field, globalConfig, helper) {
            return `<DictSelect ${helper.genCompPropStr(field, globalConfig)} />`;
        },
    },
    "date-picker": {
        title: "日期",
        props: { style: "width:100%" ,valueFormat: "YYYY-MM-DD"},
        component: DatePicker,
        code(field, globalConfig, helper) {
            return `<a-date-picker ${helper.genCompPropStr(
                field,
                globalConfig
            )} />`;

        },
    },
     "date-time-picker": {
        title: "时间",
        props: { style: "width:100%",valueFormat: "YYYY-MM-DD HH:mm:ss" },
        component: DatePicker,
        code(field, globalConfig, helper) {
            return `<a-date-picker ${helper.genCompPropStr(
                field,
                globalConfig
            )} />`;

        },
    },
    "range-picker": {
        title: "日期范围",
        props: { style: "width:100%",valueFormat: "YYYY-MM-DD", },
        component: RangePicker,
        code(field, globalConfig, helper) {
            return `<a-range-picker ${helper.genCompPropStr(
                field,
                globalConfig
            )} />`;

        },
    },
   
    "range-time-picker": {
        title: "时间范围",
        props: { style: "width:100%",valueFormat: "YYYY-MM-DD HH:mm:ss" },
        component: RangePicker,
        code(field, globalConfig, helper) {
            return `<a-range-picker ${helper.genCompPropStr(
                field,
                globalConfig
            )} />`;

        },
    },
    subForm: {
        title: "子表单",
        props: {},
        component: Card,
        code(field, globalConfig, helper) {
            return `<a-card  />`;
        },
    },
    "upload-file": {
        title: "附件上传",
        props: {},
        component: {
            setup(props) {
                return () => h("a-button", "上传文件")
            }
        },
        code(field, globalConfig, helper) {
            return `<UploadFile ${helper.genCompPropStr(field, globalConfig)} />`;
        },
    },
    "preview-media": {
        title: "预览附件",
        props: {},
        component: {
            setup(props) {
                return () => h("span", "预览附件")
            }
        },
        code(field, globalConfig, helper) {
            return `<PreviewMedia ${helper.genCompPropStr(field, globalConfig)} />`;
        },
    },
};
